<template>
    <div class="mb-3">
        <el-scrollbar>
            <el-row class="content" gutter="20" style="min-width: 200px">
                <template v-for="(item,index) in searchData.data" :key="index">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-2 d-flex" v-if="item.type=='input'">
                        <div class="title">{{item.label}}</div>
                        <el-input
                                style="width:100%"
                                :ref="(el) => {newVal[index] = el}"
                                v-model="input[index]"
                                @input="(val)=>inputChange(val,item.value)"

                        />
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-2 d-flex" v-if="item.type=='date'">
                        <div class="title">{{item.label}}</div>
                        <el-date-picker
                                style="width:100%"
                                v-model="input[index]"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                @change="pickerChange"
                                value-format="x"
                                popper-class="pick-content"
                        >
                        </el-date-picker>

                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-2 d-flex" v-if="item.type=='select'">
                        <div class="title">{{item.label}}</div>
                        <el-select v-model="input[index]" clearable style="width:100%"
                                   @change="(val)=>inputChange(val,item.name)">
                            <template v-for="(v,k) in item.data" :key="k">
                                <el-option
                                        :label="v.label"
                                        :value="v.value"
                                >
                                </el-option>
                            </template>
                        </el-select>

                    </el-col>
                </template>

                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-2 text-end">
                    <el-button-group class="w-75">
                        <el-button type="success" class="w-50" @click="submit">提交</el-button>
                        <el-button type="default" class="w-50" @click="reset">重置</el-button>
                        {{user}}
                    </el-button-group>
                </el-col>
            </el-row>
        </el-scrollbar>
    </div>
</template>

<script lang="ts">
    import {defineComponent, inject, ref, toRaw} from 'vue'

    export default defineComponent({
        name: "SearchBar",
        props: {
            data: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        setup() {
            //祖组件传递的值
            const searchData: any = inject('search');

            const input = ref([])
            const newVal = ref([])
            const condition = {};


            //将对应的input的下标的name值拼接
            //input输入
            const inputChange = (val, name) => {
                condition[name] = val
            }

            //时间选择器
            const pickerChange = (val) => {
                let date = toRaw(val);
                condition['startTime'] = date[0]
                if (date[0] == date[1]) {
                    condition['endTime'] = date[1] + 86399999
                } else {
                    condition['endTime'] = date[1]
                }
            }


            //提交数据
            const submit = () => {
                //searchData的方法
                searchData.submit(condition);
            }

            //重置数据
            const reset = () => {
                input.value = [];
                Object.keys(condition).map(key => {
                    delete condition[key]
                })
            }


            return {newVal, input, inputChange, pickerChange, submit, reset, searchData}
        }
    })
</script>


<style scoped>

    .el-row {
        margin: 0px !important;
    }


    >>> .el-input__inner {
        height: 30px;
        line-height: 30px;
    }

    .title {
        line-height: 32px;
        font-size: 14px;
        width: 84px;
        text-align: center;
    }

    @media screen and (max-width: 768px) {
        .title {
            line-height: 32px;
            text-align: center;
        }
    }
</style>